<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .pin .row .col-3{
            padding-top: 30px;
            background: #dddddd;
            line-height: 40px;
        }
        .pin .row .col-3 a{
            text-decoration: none;
            color: #000;
            font-size: 18px;
        }
        #z-06{
            margin-top: 10px;
            overflow: hidden;
        }
        #z-06 li{
            list-style: none;
            float: left;
            padding: 20px;
        }
        #z-06 li a{
            text-decoration: none;
        }
        .z-02,.z-03,.z-04,.z-05{
            padding-left: 25px;
        }
        /*图片部分*/
        .ww > div{
            background-image: url("img/xuebitu.png");
            background-repeat: no-repeat;
            padding-left: 30px;
            margin-left: 15px ;
        }
        .ww .z-02{
            background-position: 0 -70px;
        }
        .ww .z-03{
            background-position: 0 -105px;
        }
        .ww .z-04{
            background-position: 0 -140px;
        }
        .ww .z-05{
            background-position: 0 -175px;
        }
        .ww .z-06{
            background-position: 0 -265px;
        }
        .ww .z-07{
            background-position: 0 -325px;
        }
        .ww .z-08{
            background-position: 0 -360px;
        }
        .ww .z-09{
            background-position: 0 -415px;
        }
        .ww #z-06{
            background: none;
        }
        .pin .row  .col-6{
            text-align: center;
            background: #efebeb;
            padding-top: 30px;
        }
        .pin .row  .col-6 h5{
            text-align: center;
        }
        .pin .row  .col-6 input{
            width: 320px;
            height: 40px;
            outline: none;
        }
        .pin .row  .col-6 button{
            height: 41px;
            width: 50px;
            outline: none;
        }
        #list li{
            overflow: hidden;
        }
        #list span{
            float: left;
        }
        #list button{
            float: right;
            border: none;
            outline: none;
            background: transparent; //透明色
        }
        .wq{
            height: 458px;
        }
    </style>
</head>
<body>
<div class="warper">
    <div class="pin">
        <div class="row">
            <div class="col-3 ww">
                <div class="z-02"><a href="">今天</a></div>
                <div class="z-03"><a href="">最近7天</a></div>
                <div class="z-04"><a href="">日历</a></div>
                <div class="z-05"><a href="">收集箱</a></div>
                <div id="z-06">
                    <ul>
                        <li><a href="">清单</a></li>
                        <li><a href="">标签</a></li>
                        <li><a href="">自定义</a></li>
                    </ul>
                </div>

                <div class="z-06">添加清单</div>
                <div class="z-07">已完成</div>
                <div class="z-08">垃圾桶</div>
                <div class="z-09">摘要</div>
            </div>
            <div class="col-6">
                <h5>静庆清单</h5>
                <input type="text" id="input"><button id="add">添加</button>
                <ul id="list"></ul>
            </div>
            <div class="col-3 wq"></div>
        </div>
    </div>
</div>

<script>
    //待办事项
    var qw = document.querySelector('#add');
    add.addEventListener('click',function () {
        //获取input的内容
        var input = document.querySelector('#input');
        console.log(input.value);
        if(input.value == ''){
            alert('input不能为空')
        }else{
            //创建li标签
            var li = document.createElement('li');
            //创建span标签
            var qw = document.createElement('span');
            var qwa = document.createTextNode(input.value);
            qw.appendChild(qwa);
            //创建button标签
            var wa = document.createElement('button');
            var waq = document.createTextNode('x');
            wa.appendChild(waq);
            //给button添加一个点击事件
            wa.addEventListener('click',function () {
                console.log(this.parentNode)
                var list = document.querySelector('#list')
                list.removeChild(this.parentNode)
            });
            //把span和button追加到li标签
            li.appendChild(qw);
            li.appendChild(wa);
            console.log(li);
            console.log(qw);
            console.log(wa);
            //把li追加到ul里面
            var list = document.querySelector('#list');
            list.appendChild(li);
            input.value = null
        }
    })
</script>
</body>
</html>